<template>
  <a-col :xl="{ span: 4 }" :lg="{ span: 12 }" :md="{ span: 12 }">
    <div class="clearfix">
      <a-upload
        listType="picture-card"
        :action="uploadUrl"
        :beforeUpload="beforeUpload"
        :fileList="fileList"
        :headers="headers"
        :remove="removeFile"
        @preview="handlePreview"
        @change="handleChange">
        <div v-if="fileList.length < 1">
          <a-icon type="plus" />
          <div class="ant-upload-text">
            {{ data.fieldAliase }}
          </div>
        </div>
      </a-upload>

      <a-modal :visible="previewVisible" :footer="null" @cancel="cancelPreview">
        <img alt="example" style="width: 100%" :src="previewImage" />
      </a-modal>

    </div>
  </a-col>
</template>
<script>
  import {
    api,
    deleteFile
  } from '@/api/site/upload.js'
  import store from '@/store'
  export default {
    name: 'ExtendsJson',
    components: {},
    props: {
      form: {
        type: Object,
        required: true
      },
      data: {
        type: Object,
        required: true
      }
    },
    data () {
      return {
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 3
          }
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 20
          }
        },
        rules: [],
        fileList: [],
        previewVisible: false,
        previewImage: '',
        uploadUrl: api.upload,
        headers: {
          Authorization: 'bearer  ' + store.getters.token
        }
      }
    },
    created () {

    },
    methods: {
      getValueData () {
        if (this.data.defaultValue) {
          this.fileList = this.data.defaultValue
        }
      },
      beforeUpload (file, fileList) {
        let contin = true
        if (file.size >= 104857600) {
          contin = false
          this.$message.error('文件大小超过最大限制 100M')
        }
        return contin
      },
      handleChange (e) {
        this.fileList = e.fileList
        if (e.file.status === 'done') {
          if (e.file.response.code !== 0) {
            this.fileList = []
            this.$message.error(e.file.response.msg)
          }
        }
      },
      removeFile (file) {
        if (file && !file.error && file.response && file.response.res.fileUid) {
          deleteFile({
            fileUid: file.response.res.fileUid
          }).then(response => {
            if (response.code === 0) {
              console.log('delete file success')
            }
          })
        }
      },
      handlePreview (file, fieldName) {
        this.previewImage = file.url || file.thumbUrl
        this.previewVisible = true
      },
      cancelPreview () {
        this.previewVisible = false
        this.previewImage = null
      },
      getFieldValue () {
        return this.filterField()
      },
      setFieldValue (value) {
        if (value) {
          this.beforeSetVal(value)
        }
      },
      beforeSetVal (value) {
         if (value && value instanceof Array) {
            const fileList = []
            for (let i = 0; i < value.length; i++) {
              const val = value[i]
              val.response = {
                  code: 0,
                  msg: '操作成功!',
                  res: Object.assign({}, val)
              }
              fileList.push(val)
            }
            this.fileList = fileList
            console.log(this.fileList)
         }
      },
      fieldClear () {
        this.fileList = []
      },
      filterField () {
        const fields = []
        if (this.fileList.length > 0) {
          const field = this.fileList[0]
          const fileObj = field.response.res
          fields.push({
            uid: fileObj.fileUid,
            fileUid: fileObj.fileUid,
            name: field.name,
            status: 'done',
            url: fileObj.fileFullPath ? fileObj.fileFullPath : fileObj.url
          })
        }
        return fields
      }
    }
  }
</script>
